<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>项目列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="tabe_div" style="padding-right: 0">
    <p class="p_line text_ient"></p>
    <div style="display: inline">
        <@shiro.hasPermission name="system:project:add">
            <a href="#" class="a_add" id="add_box" onclick="add();">添加</a>
        </@shiro.hasPermission>
        <@shiro.hasPermission name="system:project:delete">
            <a href="#" class="a_del" onclick="delMs();" style="margin-right: 150px">删除</a>
        </@shiro.hasPermission>
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <table id="table_list" class="table_style table-striped" style="margin: 0 auto">
    </table>
    <div style="height: 50px;"></div>
</div>

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        // 初始化表格
        initTable();
    });

    function initTable() {
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "POST",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "${ctx!}/admin/project/list",
            //表格显示条纹
            striped: true,
            //启动分页
            pagination: true,
            //每页显示的记录数
            pageSize: 10,
            //当前第几页
            pageNumber: 1,
            //记录数可选列表
            pageList: [5, 10, 15, 20, 25],
            //是否启用查询
            search: false,
            //是否启用详细信息视图
            detailView: false,
            //表示服务端请求
            sidePagination: "server",
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: 'undefined',
            queryParams: queryParams,
            //json数据解析
            responseHandler: function (res) {
                return {
                    "rows": res.content,
                    "total": res.totalElements
                };
            },
            //数据列
            columns: [
                {
                    checkbox: true,
                    width: 40,
                },
                {
                    field: 'no',
                    title: '序号',
                    sortable: true,
                    align: "center",
                    width: 80,
                    //width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $('#table_list').bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber = $('#table_list').bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    title: "项目ID",
                    field: "identification",
                    width: 150,
                },
                {
                    title: "项目名称",
                    field: "name",
                    width: 150,
                }, {
                    title: "所在地区",
                    field: "city",
                    width: 150,
                }, {
                    title: "项目起始时间",
                    field: "createTime",
                    width: 150,
                }, {
                    title: "操作",
                    field: "empty",
                    width: 350,
                    formatter: function (value, row, index) {
                        var operateHtml = '<@shiro.hasPermission name="system:project:edit"><button class="btn btn-primary btn-xs" type="button" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>&nbsp;项目配置</button> &nbsp;</@shiro.hasPermission>';
                        operateHtml = operateHtml + '<@shiro.hasPermission name="system:project:delete"><button class="btn btn-danger btn-xs" type="button" onclick="del(\'' + row.id + '\')"><i class="fa fa-remove"></i>&nbsp;删除</button> &nbsp;</@shiro.hasPermission>';
                        operateHtml = operateHtml + '<@shiro.hasPermission name="system:device:index"><button class="btn btn-info btn-xs" type="button" onclick="device(\'' + row.id + '\',\'' + row.name + '\')"><i class="fa fa-arrows"></i>&nbsp;点位列表</button> &nbsp;</@shiro.hasPermission>';
                        operateHtml = operateHtml + '<@shiro.hasPermission name="system:device:index"><button class="btn btn-info btn-xs" type="button" onclick="deviceGroup(\'' + row.id + '\',\'' + row.name + '\')"><i class="fa fa-arrows"></i>&nbsp;设备组管理</button> &nbsp;</@shiro.hasPermission>';
                        operateHtml = operateHtml + '<@shiro.hasPermission name="system:project:edit"><button class="btn btn-info btn-xs" type="button" onclick="systemClass(\'' + row.id + '\')"><i class="fa fa-arrows"></i>&nbsp;系统分类管理</button></@shiro.hasPermission>';
                        <#--operateHtml = operateHtml + '<@shiro.hasPermission name="system:project:edit"><button class="btn btn-info btn-xs" type="button" onclick="statisticsConfig(\'' + row.id + '\')"><i class="fa fa-arrows"></i>&nbsp;数据分析配置</button></@shiro.hasPermission>';-->
                        operateHtml = operateHtml + '<@shiro.hasPermission name="system:project:edit"><button class="btn btn-info btn-xs" type="button" onclick="display(\'' + row.id + '\',\'' + row.name + '\')"><i class="fa fa-image"></i>&nbsp;修改界面</button></@shiro.hasPermission>';
                        return operateHtml;
                    }
                }]
        });
    }

    function systemClass(projectId) {
        $("#navbar-header-title", window.parent.document).html(name + "&nbsp&nbsp系统分类管理");
        window.location.href = '${ctx!}/admin/project/sysclass/' + projectId;
    }

    function statisticsConfig(projectId) {
        $("#navbar-header-title", window.parent.document).html(name + "&nbsp&nbsp数据分析配置");
        window.location.href = '${ctx!}/admin/statistics/config/' + projectId;
    }

    function edit(id) {
        layer.open({
            type: 2,
            title: '修改项目信息',
            shadeClose: true,
            shade: false,
            area: ['893px', '450px'],
            content: '${ctx!}/admin/project/edit/' + id,
            end: function (index) {
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }

    function display(id, name) {
        window.location.href = '${ctx!}/admin/project/display/' + id;
    }

    function add() {
        layer.open({
            type: 2,
            title: '新增项目信息',
            shadeClose: true,
            shade: false,
            area: ['893px', '450px'],
            content: '${ctx!}/admin/project/add',
            end: function (index) {
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }

    function device(id, name) {
        $("#navbar-header-title", window.parent.document).html(name + "&nbsp/&nbsp点位管理");
        window.location.href = '${ctx!}/admin/device/index/' + id;
    }

    function deviceGroup(id, name) {
        $("#navbar-header-title", window.parent.document).html(name + "&nbsp/&nbsp设备组管理");
        window.location.href = '${ctx!}/admin/equipment/index/' + id;
    }

    function del(id) {
        layer.confirm('您确定要删除吗？删除后状态不可恢复', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                method: 'DELETE',
                dataType: "json",
                url: "${ctx!}/admin/project/delete/" + id,
                success: function (data) {
                    layer.msg(data.message, {time: 2000}, function () {
                        $('#table_list').bootstrapTable("refresh");
                        layer.close(index);
                    });
                }
            });
        });
    }

    function delMs() {
        var rows = $("#table_list").bootstrapTable('getSelections');
        if (rows.length == 0) {
            alert("请先选择要删除的记录!");
            return;
        }
        var ids = '';
        for (var i = 0; i < rows.length; i++) {
            ids += rows[i]['id'] + "&";
        }
        ids = ids.substring(0, ids.length - 1);

        layer.confirm('您确定要删除吗？删除后状态不可恢复', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                method: 'DELETE',
                dataType: "json",
                url: "${ctx!}/admin/project/deletems/" + ids,
                success: function (data) {
                    layer.msg(data.message, {time: 2000}, function () {
                        $('#table_list').bootstrapTable("refresh");
                        layer.close(index);
                    });
                }
            });
        });
    }


    function queryParams(params) {
        return {
            // basic
            pageSize: params.pageSize,
            pageNumber: params.pageNumber,
            sortName: params.sortName,
            sortOrder: params.sortOrder,
        }
    }


</script>


</body>

</html>
